<template>
  <view class="">
     <u-navbar title="个人资料" :autoBack="true"> </u-navbar>
      <u-gap height="50" bgColor="#F8FAFB"></u-gap>
    <view class="u-flex u-p-30 u-row-between bg-white">
      <view class="">
        <u-image width="207rpx" border-radius="14" height="207rpx" :src="userInfo.headImage"></u-image>
      </view>
      <view class="u-flex-1 u-p-l-30 u-p-tb-10 user-info">
        <view class="name u-flex u-row-between">
          <text
            class="u-font-42 u-font-weight">{{userType==3?userInfo.teacherName:userType==4?userInfo.studentName:''}}</text>
          <view class="perfect" @click="toEdit">
            完善信息
          </view>
        </view>
        <view class="">
          <view class="u-flex u-row-between">
            <view class="left">
              <text class="text-tips u-m-r-10">性别</text>
              <text class="text-black u-font-weight">{{sexText}}</text>
            </view>
            <view class="u-flex-1" v-if="userType == 3">
              <text class="text-tips u-m-r-10">职务</text>
              <text class="text-black u-font-weight">{{userInfo.remark}}</text>
            </view>
            <view class="u-flex-1" v-if="userType == 4">
              <text class="text-tips u-m-r-10">民族</text>
              <text class="text-black u-font-weight">{{userInfo.nation}}</text>
            </view>
          </view>

          <view class="u-m-t-8" v-if="userType == 4">
            <view class="u-flex-1">
              <text class="text-tips u-m-r-10">班级</text>
              <text class="text-black u-font-weight">{{userInfo.classGrade || ''}}</text>
            </view>
            <view class="u-flex-1 u-m-t-8">
              <text class="text-tips u-m-r-10">专业</text>
              <text class="text-black u-font-weight">{{userInfo.major || ''}}</text>
            </view>
          </view>

          <view class="u-flex u-row-between u-m-t-15" v-if="userType == 3">
            <view class="left">
              <text class="text-tips u-m-r-10">类型</text>
              <text class="text-black u-font-weight">{{userInfo.employType || ''}}</text>
            </view>
            <view class="u-flex-1">
              <text class="text-tips u-m-r-10">职称</text>
              <text class="text-black u-font-weight">{{userInfo.post || ''}}</text>
            </view>
          </view>

        </view>
      </view>
    </view>
    <view class="u-p-30 text-gray">
      基本信息
    </view>
    <view class="info bg-white">

      <view class="u-p-30 u-flex">
        <view class="label u-font-30 text-tips">所在学院</view>
        <view class="u-font-30 text-black">{{userInfo.college || userInfo.collegeName || ''}}</view>
      </view>

      <view class="u-p-30 u-flex u-border-top" v-if="userType == 4">
        <view class="label u-font-30 text-tips">所属系部</view>
        <view class="u-font-30 text-black">{{userInfo.department}}</view>
      </view>

      <view class="u-p-30 u-flex u-border-top">
        <view class="label u-font-30 text-tips">身份证号</view>
        <view class="u-font-30 text-black">{{userInfo.identityCardNumber || ''}}</view>
      </view>

      <view class="u-p-30 u-flex u-border-top">
        <view class="label u-font-30 text-tips">出生日期</view>
        <view class="u-font-30 text-black">{{userType==4?userInfo.birthday : birthdayTime}}</view>
      </view>


      <view class="u-p-30 u-flex u-border-top">
        <view class="label u-font-30 text-tips">联系方式</view>
        <view class="u-font-30 text-black">{{userInfo.phone || userInfo.teacherTelephone || ''}}</view>
      </view>


      <view class="u-p-30 u-flex u-border-top" v-if="userType == 4">
        <view class="label u-font-30 text-tips">入学时间</view>
        <view class="u-font-30 text-black">{{userInfo.enrollmentTime}}</view>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  import {
    getUserInfo,
    getTeacherUserInfo,
    updateAvatar,
    updateNickname
  } from '../../api/user'

  export default {
    computed: {
      ...mapState(["userType", "userId"]),
      sexText({
        userType,
        userInfo
      }) {
        let str = '未知';
        if (userType == 3) {
          str = userInfo.teacherSex == 1 ? '男' : '女'
        } else if (userType == 4) {
          str = userInfo.studentSex == 1 ? '男' : '女'
        }
        return str;
      },
      birthdayTime({
        userInfo
      }) {
        // let timestamp = new Date(userInfo.teacherBirthday).getTime()
        return (userInfo.teacherBirthday || '').split('T').shift();
      }
    },
    onShow() {
      this.loadUserInfoData()
    },
    data() {
      return {
        userInfo: {}
      }
    },
    methods: {
      loadUserInfoData() {
        let method = ''
        if (this.userType == 3) {
          method = getTeacherUserInfo;
        } else if (this.userType == 4) {
          method = getUserInfo;
        }
        if (!method) return;
        method({
          id: this.userId
        }).then(res => {
          this.userInfo = res.data;
          this.$store.commit('SET_USER_INFO',res.data)
        })
      },
      toEdit() {
        if (this.userType == 3) {
          uni.setStorageSync('teachr_user_info', this.userInfo);
          uni.navigateTo({
            url: '/pages/profile/teacherForm'
          })
        } else if (this.userType == 4) {
          uni.setStorageSync('student_user_info', this.userInfo);
          uni.navigateTo({
            url: '/pages/profile/studentForm'
          })
        }
      }
    },
  }
</script>

<style>
  page {
    background: #F8FAFB;
  }
</style>
<style lang="scss" scoped>
  .user-info {
    height: 207rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .name {
      position: relative;

      .perfect {
        position: absolute;
        right: -40rpx;
        top: 0;
        color: #C4AD8C;
        border: 1px solid rgba(196, 173, 140, 0.54);
        padding: 5rpx 30rpx 5rpx 30rpx;
        border-radius: 15rpx;
      }
    }

    .left {
      width: 180rpx;
    }
  }

  .info {
    .label {
      width: 200rpx;
    }
  }
</style>
